// 此文件放 封装的全局指令
// install: 在真实DOM元素创建时触发
// update：指令所在标签，被更新时 触发

// vue 自定义指令
// Vue.directive('fofo', {
//   inserted (el) {
//     // console.log(el)
//     // 指令所在van-Search组件
//     // 组件根标签是div，input在内部 无法直接获取input标签
//     // 以上都是原生标签（组件是有原生标签构成的）
//     const theInput = el.querySelector('input')
//     theInput.focus()
//   }
// })
// 封装中间件函数插件
const directiveObj = {
  install (Vue) {
    Vue.directive('fofo', {
      // el代表指令所在标签
      // inserted:是在真实DOM元素创建时触发
      // 指令所在标签,被插入真实DOM元素时才触发,如果标签用display:none隐藏再出现,不会再触发inserted
      inserted (el) {
        // 搜索页面el是div标签
        // 文章评论el是textarea
        // 知识点：原生DOM.nodeName 拿到标签和名字（注意：大写的字符串）
        // 判断el是不是input和textarea 如果是input和textarea 直接加focus() 即可
        // 因为用的是组件库，有可能input/textarea是在组件标签内部的，el拿不到input/textarea 原生标签，拿到的是根标签 。所以要从根标签获取input/textarea元素
        if (el.nodeName === 'TEXTAREA' || el.nodeName === 'INPUT') {
          setTimeout(() => {
            el.focus()
          }, 500)
        } else {
          setTimeout(() => {
            // el是根标签，从根标签上获取内部标签
            const theInput = el.querySelector('input')
            const theTextaea = el.querySelector('textarea')
            // 不一定能获取的到 null，需要加判断  有值了再focus
            if (theInput) theInput.focus()
            if (theTextaea) theTextaea.focus()
          }, 500)
        }
      },
      // 指令所在标签,被更新时触发
      update (el) {
        if (el.nodeName === 'TEXTAREA' || el.nodeName === 'INPUT') {
          setTimeout(() => {
            el.focus()
          }, 500)
        } else {
          setTimeout(() => {
            // el是根标签，从根标签上获取内部标签
            const theInput = el.querySelector('input')
            const theTextaea = el.querySelector('textarea')
            // 不一定能获取的到 null，需要加判断  有值了再focus
            if (theInput) theInput.focus()
            if (theTextaea) theTextaea.focus()
          }, 500)
        }
      }
    })
  }
}
export default directiveObj
